<!--区域编辑-->
<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/area' }">区域管理</el-breadcrumb-item>
                <el-breadcrumb-item>区域编辑</el-breadcrumb-item>
            </el-breadcrumb>

            <el-row>
                <el-col align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <el-button type="primary" @click="areaSave()">保存</el-button>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col align="left">
                    <h1>基本信息</h1>
                </el-col>
            </el-row>

            <el-row :gutter="30" class="mt20">
                <el-form label-position="left" :rules="rules" label-width="100px" ref="groups">
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="所属分组" required>
                                <el-cascader
                                        class="size-full"
                                        v-model="areaGroups"
                                        :options="groups"
                                        :show-all-levels="false"
                                        :props="{value: 'id', label: 'name',  checkStrictly: true,expandTrigger: 'hover' }"
                                        clearable>
                                </el-cascader>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6" :offset="1">
                            <el-form-item label="区域类型" required>
                                <el-select v-model="area.type " clearable class="size-full">
                                    <!--                                    <el-option label="未设置" :value="0"></el-option>-->
                                    <el-option label="限速区域" :value="1"></el-option>
                                    <el-option label="停车场" :value="2"></el-option>
                                    <el-option label="加油站充电区" :value="3"></el-option>
                                    <el-option label="告警区域" :value="4"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="区域名称" required>
                                <el-input
                                        @input="keydown1"
                                        v-model.trim="area.name"
                                        type="text"
                                        :maxlength="10"
                                        show-word-limit
                                ></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6" :offset="1">
                            <el-form-item label="名称拼音">
                                <el-input v-model="pinyin" :maxlength="20"
                                          show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="拼音缩写">
                                <el-input v-model="abbr" :maxlength="20"
                                          show-word-limit></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6" :offset="1">
                            <el-form-item v-if="area.type==1" label=" 最高时速" required>
                                <el-input v-model="area.value" type="text" placeholder="最高时速"/>
                            </el-form-item>
                            <el-form-item v-else-if="area.type==2" label=" 可停车辆数" required>
                                <el-input v-model="area.value" type="text"
                                          placeholder="可停车辆数"/>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="禁用状态">
                                <el-radio-group v-model="disabled">
                                    <el-radio :label="1">已禁用</el-radio>
                                    <el-radio :label="0">未禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6" :offset="1">
                            <el-form-item label="隐藏状态">
                                <el-radio-group v-model="hidden">
                                    <el-radio :label="1">已隐藏</el-radio>
                                    <el-radio :label="0">未隐藏</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="所属线路">
                                <el-select v-model="value1" multiple filterable clearable placeholder="请选择"
                                           style="width:100%">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.lineId"
                                            :label="item.lineName"
                                            :value="item.lineId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </el-row>

            <br/>

            <el-row>
                <el-col align="left">
                    <h1>绘制区域</h1>
                </el-col>
            </el-row>
            <br/>
            <el-button type="text" @click="appearMap()">点击开始绘制</el-button>

            <div class="map">
                <el-dialog
                        :visible.sync="dialogVisible"
                        width="60%"
                        height="30%"
                        :show-close="false"
                        :destroy-on-close="true"
                        :before-close="handleClose">

                    <span class="dialog__body">
                          <div class="dlblock-mb20 pr10">
                        <el-button type="danger" @click="clearAll()">清除所有区域</el-button>
                         </div>
                          <div id="dbmap"></div>
                    </span>

                    <span slot="footer" class="dialog-footer">

                     <el-button @click="cancel()">取 消</el-button>
                     <el-button type="primary" @click="save()">保 存</el-button>
             </span>
                </el-dialog>

                <template>
                    <img class="img" :src="url"/>
                </template>

            </div>

        </div>
    </div>
</template>

<script>

    //引入汉字转拼音插件文件
    import vPinyin from '../../../../utils/vue-py'
    import {getGroupTree, getLineIds, getLines, saveArea, saveLine} from '@/api';

    export default {
        name: 'index1',
        data() {
            return {

                options: [],
                value1: [],

                //线路参数
                lines: {
                    lineIds: [],
                    regionId: '',
                },

                regionId: '',

                //线路支线多选
                props: {
                    label: 'name',
                    children: 'zones'
                },
                count: 1,

                //线路和支线 弹出框
                RL: false,

                a: [],

                //对话框
                dialogVisible: false,

                //地图样式
                styleObj1: {height: '600'},

                area: {
                    type: '',
                },

                //分组信息
                areaGroups: '',
                groups: [],


                temps: [],

                //  验证规则
                rules: {},

                //百度地图
                path: '',
                //所有点的集合
                pts: [],

                //取消点集合
                cancelPts: [],
                //取消图形形状
                cancelShape: '',


                map: null,
                drawingManager: null,

                allOverlay: '',

                overlays: [],

                //拼音首字母
                pinyin: '',
                abbr: '',

                //是否隐藏
                disabled: 0,
                hidden: 0,

                //图片URL
                url: '',

                //中心点
                longitude: '',
                latitude: '',
                zoom: '',

                //回显图形 echo
                echoPolygon: '',
                echoCircle: ''
            }
        },


        watch: {
            'echoPolygon.ha': function () {

                //多边形
                if (this.echoPolygon.Ao != null && this.echoPolygon.Ao.length > 0) {
                    this.area.shape = 1
                    let pts = []
                    for (let i = 0; i < this.echoPolygon.Ao.length; i++) {
                        pts.push(this.echoPolygon.Ao[i].lat)
                        pts.push(this.echoPolygon.Ao[i].lng)
                    }
                    this.pts = pts
                } else {

                    //圆形
                    this.pts = []
                    this.area.shape = 3
                    this.pts.push(this.echoPolygon.point.lat)
                    this.pts.push(this.echoPolygon.point.lng)
                    this.area.radius = parseInt(this.echoPolygon.xa)

                    for (let i = 0; i < this.echoPolygon.ha.length; i++) {
                        this.pts.push(this.echoPolygon.ha[i].lat)
                        this.pts.push(this.echoPolygon.ha[i].lng)
                    }
                }
            },

            'area.name': {
                handler(newValue, oldValue) {
                }
            },


            dialogVisible: function () {

                if (this.dialogVisible == false) {
                    //未绘制图形
                    if (this.pts != null && this.pts.length == 0) {
                        this.url = ""
                    }

                    if (this.pts != null && this.pts.length > 0) {
                        this.area.pts = this.pts

                        //圆形
                        if (this.area.pts != undefined && this.area.shape == 3) {

                            this.longitude = (this.area.pts[1])
                            this.latitude = (this.area.pts[0])

                            let maxLng = this.area.pts[3];
                            let minLng = this.area.pts[3];
                            for (let i = 3; i < this.area.pts.length; i += 2) {
                                let cut = this.area.pts[i];
                                cut > maxLng ? maxLng = cut : null;
                                cut < minLng ? minLng = cut : null;
                            }

                            let maxLat = this.area.pts[2];
                            let minLat = this.area.pts[2];
                            for (let i = 2; i < this.area.pts.length; i += 2) {
                                let cur = this.area.pts[i];
                                cur > maxLat ? maxLat = cur : null;
                                cur < minLat ? minLat = cur : null;
                            }

                            this.zoom = this.getZoom(maxLng, minLng, maxLat, minLat);

                            let pathPolygon = ''
                            for (let i = 2; i < this.area.pts.length; i += 2) {
                                pathPolygon = pathPolygon + parseFloat(this.area.pts[i + 1]) + ',' + parseFloat(this.area.pts[i]) + ';'
                            }

                            this.url = `http://api.map.baidu.com/staticimage/v2?ak=0MA953dkYQM4fQriWe6NaII8QpjeCCZh&center=${this.longitude},${this.latitude}&width=1000&height=320&zoom=${this.zoom + 1}&paths=${pathPolygon}&pathStyles=0xff0000,5,0.9,0xffffff&bbox=500,500;500,500 `
                        }

                        //多边形
                        if (this.area.pts != undefined && this.area.shape == 1) {
                            let maxLng = this.area.pts[1];
                            let minLng = this.area.pts[1];
                            for (let i = 1; i < this.area.pts.length; i += 2) {
                                let cut = this.area.pts[i];
                                cut > maxLng ? maxLng = cut : null;
                                cut < minLng ? minLng = cut : null;
                            }

                            let maxLat = this.area.pts[0];
                            let minLat = this.area.pts[0];
                            for (let i = 0; i < this.area.pts.length; i += 2) {
                                let cur = this.area.pts[i];
                                cur > maxLat ? maxLat = cur : null;
                                cur < minLat ? minLat = cur : null;
                            }

                            this.zoom = this.getZoom(maxLng, minLng, maxLat, minLat);

                            let x = 0.0;
                            let y = 0.0;
                            let pathPolygon = ''
                            for (let i = 0; i < this.area.pts.length; i += 2) {
                                //经度
                                x = x + parseFloat(this.area.pts[i + 1]);
                                //维度
                                y = y + parseFloat(this.area.pts[i]);
                                pathPolygon = pathPolygon + parseFloat(this.area.pts[i + 1]) + ',' + parseFloat(this.area.pts[i]) + ';'
                            }
                            this.longitude = (x / this.area.pts.length) * 2;
                            this.latitude = (y / this.area.pts.length) * 2;

                            this.url = `http://api.map.baidu.com/staticimage/v2?ak=0MA953dkYQM4fQriWe6NaII8QpjeCCZh&center=${this.longitude},${this.latitude}&width=1000&height=320&zoom=${this.zoom}&paths=${pathPolygon}&pathStyles=0xff0000,5,0.9,0xffffff&bbox=500,500;500,500 `
                        }
                    }
                }
            },
        },

        methods: {

            //拼音 键盘 弹起
            keydown1: function () {
                //获取拼音
                this.pinyin = vPinyin.chineseToPinYin(this.area.name)

                //获取首字母
                let SX = '';
                for (let i = 0; i < this.pinyin.length; i++) {
                    let c = this.pinyin.charAt(i);
                    if (/^[A-Z]+$/.test(c)) {
                        SX += c;
                    }
                }
                this.abbr = SX;
            },

            keydown2: function () {

            },

            //获取线路

            //线路和支线 多选
            handleCheckChange(data, checked, indeterminate) {
            },
            // handleNodeClick(data) {
            // },
            loadNode(node, resolve) {

                if (node.level === 0) {
                    return resolve([{name: 'region1'}, {name: 'region2'}]);
                }
                // if (node.level > 3) return resolve([]);

                var hasChild;
                if (node.data.name === 'region1') {
                    hasChild = true;
                } else if (node.data.name === 'region2') {
                    hasChild = false;
                } else {
                    hasChild = Math.random() > 0.5;
                }
                setTimeout(() => {
                    var data;
                    if (hasChild) {
                        data = [{
                            name: 'zone' + this.count++
                        }, {
                            name: 'zone' + this.count++
                        }];
                    } else {
                        data = [];
                    }
                    resolve(data);
                }, 500);
            },


            //线路和支线 弹出框
            ral(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },

            //地图显示隐藏 事件
            //取消
            cancel() {
                this.dialogVisible = false
                this.pts = this.cancelPts
                this.area.shape = this.cancelShape
            },


            //保存
            save() {
                this.dialogVisible = false
                this.cancelPts = this.pts
                this.cancelShape = this.area.shape
            },

            //对话框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },

            //区域保存
            areaSave() {
                this.area.abbr = this.abbr
                this.area.pinyin = this.pinyin
                if (this.pts != null && this.pts.length > 0) {
                    this.area.pts = this.pts
                } else {
                    this.area.pts = []
                }
                if (this.areaGroups.length > 0) {
                    this.area.group = this.areaGroups[this.areaGroups.length - 1]
                }
                this.area.disabled = this.disabled
                this.area.hidden = this.hidden

                this.area.disabled = this.disabled
                this.area.hidden = this.hidden

                if (this.area.type == 1 || this.area.type == 2) {
                    let s = this.area.value;
                    if (isNaN(s)) {
                        this.$message.error("输入正确的可停车辆数或最大限速")
                    } else {
                        var d = this.area
                        saveArea(d).then(res => {
                            if (res != null && res.code == 200) {
                                console.log(res.data)
                                //保存线路到关联表
                                this.lines.lineIds = this.value1
                                this.lines.regionId = res.data
                                saveLine(this.lines).then(res => {
                                })

                                this.$message.success("保存成功！！！")
                                //跳转页面
                                this.$router.push('/area')
                            } else {
                                this.$message.error("保存失败！！！")
                            }
                        })
                    }
                } else {
                    var d1 = this.area
                    saveArea(d1).then(res => {
                        if (res != null && res.code == 200) {
                            //保存线路到关联表
                            this.lines.lineIds = this.value1
                            this.lines.regionId = res.data
                            saveLine(this.lines).then(res => {
                            })

                            this.$message.success("保存成功！！！")
                            //跳转页面
                            this.$router.push('/area')
                        } else {
                            this.$message.error("保存失败！！！")
                        }
                    })
                }
            },

            /*获取分组信息*/
            getAreaGroupsInfo() {
                getGroupTree({}).then(res => {
                    this.groups = res.data.children
                })
            },

            /*重置数据*/
            reset() {
                Object.assign(this.$data, this.$options.data())
                for (var i = 0; i < this.overlays.length; i++) {
                    this.map.removeOverlay(this.overlays[i]);
                }
                this.overlays.length = 0;
                this.pts = []
                this.getAreaGroupsInfo()
            },

            /*  百度地图*/
            //清除绘制区域
            clearAll() {
                this.map.getOverlays()
                this.allOverlay = this.map.getOverlays();
                for (let i = 0; i < this.allOverlay.length - 1; i++) {
                    this.map.removeOverlay(this.allOverlay[i]);
                }

                for (let j = 0; j < this.overlays.length; j++) {
                    this.map.removeOverlay(this.overlays[j]);
                }

                this.echoPolygon = null
                this.allOverlay.length = 0
                this.overlays.length = 0;
                this.temps = [];
                this.pts = []
            },


            //获取 覆盖物
            overlaycomplete(e) {

                this.overlays.push(e.overlay);

                if (this.overlays.length == 0) {
                    this.pts = []
                } else if (this.overlays.length > 1 || this.echoPolygon != null) {
                    alert("只能绘制一个区域！！！")
                    this.map.getOverlays()
                    this.allOverlay = this.map.getOverlays();
                    for (let i = 0; i < this.allOverlay.length - 1; i++) {
                        this.map.removeOverlay(this.allOverlay[i]);
                    }

                    for (let j = 0; j < this.overlays.length; j++) {
                        this.map.removeOverlay(this.overlays[j]);
                    }

                    this.echoPolygon = null
                    this.allOverlay.length = 0
                    this.overlays.length = 0;
                    this.temps = [];
                    this.pts = []

                } else {
                    var path = e.overlay.getPath(); //Array<Point> 返回多边型的点数组
                    if (path != null) {
                        if (this.overlays[0].__proto__.PQ == 'Polygon') {
                            this.area.shape = 1
                            for (var j = 0; j < path.length; j++) {
                                this.pts.push(path[j].lat)
                                this.pts.push(path[j].lng)

                            }
                        } else if (this.overlays[0].__proto__.PQ == 'Circle') {

                            this.area.shape = 3
                            this.pts.push(this.overlays[0].point.lat)
                            this.pts.push(this.overlays[0].point.lng)

                            this.area.radius = parseInt(this.overlays[0].xa)

                            for (let i = 0; i < this.overlays[0].ha.length; i++) {
                                this.pts.push(this.overlays[0].ha[i].lat)
                                this.pts.push(this.overlays[0].ha[i].lng)
                            }
                        }
                    }
                }
            },


            //获取 绘制区域数
            al() {
                alert(this.overlays.length);
            },


            //根据经纬极值计算绽放级别。
            getZoom(maxLng, minLng, maxLat, minLat) {

                this.map = new BMap.Map();

                let zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]//级别18到3。
                let pointA = new BMap.Point(maxLng, maxLat);  // 创建点坐标A
                let pointB = new BMap.Point(minLng, minLat);  // 创建点坐标B
                let distance = this.map.getDistance(pointA, pointB).toFixed(1);  //获取两点距离,保留小数点后两位
                for (let i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
                    if (zoom[i] - distance > 0) {
                        return 18 - i + 1;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                    }
                }
            },


            //点击出现地图
            appearMap() {
                this.dialogVisible = true
                let that = this
                setTimeout(function () {
                    that.map = new BMap.Map("dbmap", {
                        enableMapClick: false // 禁止底图点击事件
                    });

                    //圆形
                    if (that.pts != undefined && that.pts.length > 0 && that.area.shape == 3) {
                        //半径
                        let radius = that.area.radius;
                        let point = new BMap.Point(that.longitude, that.latitude);
                        that.map.centerAndZoom(point, that.zoom + 1);
                        // 创建标注
                        let marker = new BMap.Marker(point);
                        // 将标注添加到地图中
                        that.map.addOverlay(marker);
                        //跳动的点
                        marker.setAnimation(BMAP_ANIMATION_BOUNCE);

                        that.temps = [];
                        let arrays = that.pts;
                        for (let i = 0; i < arrays.length; i += 2) {
                            // let  pt=new BMap.Point(pts[i]["lng"], pts[i]["lat"]);
                            let lng = arrays[i + 1];
                            let lat = arrays[i];
                            let pt = new BMap.Point(lng, lat);
                            //  alert("经度："+lng+" 是第"+i+"次出现!")
                            that.temps.push(pt);
                        }
                        that.echoPolygon = new BMap.Circle(point, radius, {
                            fillColor: "blue",
                            strokeWeight: 1,
                            fillOpacity: 0.3,
                            strokeOpacity: 0.3
                        })
                        that.map.addOverlay(that.echoPolygon);
                        //开启可编辑
                        that.echoPolygon.enableEditing();
                    }

                    //多边形
                    if (that.pts != undefined && that.pts.length > 0 && that.area.shape == 1) {

                        let point = new BMap.Point(that.longitude, that.latitude);
                        that.map.centerAndZoom(point, that.zoom);
                        // 创建标注
                        let marker1 = new BMap.Marker(point);
                        that.map.addOverlay(marker1);
                        marker1.setAnimation(BMAP_ANIMATION_BOUNCE);

                        that.temps = [];
                        let arrays = that.pts;
                        for (let i = 0; i < arrays.length; i += 2) {
                            let lng = arrays[i + 1];
                            let lat = arrays[i];
                            let pt = new BMap.Point(lng, lat);
                            that.temps.push(pt);
                        }

                        // echoPolygon: '',
                        //   echoCircle: ''
                        //创建多边形标注
                        that.echoPolygon = new BMap.Polygon(that.temps,
                            {strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5}
                        );
                        that.map.addOverlay(that.echoPolygon);

                        //开启可编辑
                        that.echoPolygon.enableEditing();

                    } else {
                        that.map.centerAndZoom(new BMap.Point(117.246258, 31.837809), 17);
                    }
                    that.map.enableScrollWheelZoom();
                    //开启定位
                    that.map.addControl(new BMap.GeolocationControl());
                    //地图类型(地图 卫星 三维)
                    //this.map.addControl(new BMap. MapTypeControl());

                    that.map.enableMapClick = false;

                    //实例化鼠标绘制工具
                    that.drawingManager = new BMapLib.DrawingManager(that.map, {
                        isOpen: true, //是否开启绘制模式
                        enableDrawingTool: true, //是否显示工具栏
                        drawingToolOptions: {
                            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                            offset: new BMap.Size(5, 5), //偏离值
                            drawingModes: [ // 可见的操作选项
                                // BMAP_DRAWING_MARKER,
                                //圆形
                                BMAP_DRAWING_CIRCLE,
                                // BMAP_DRAWING_POLYLINE,
                                //多边形
                                BMAP_DRAWING_POLYGON,
                                //矩形
                                BMAP_DRAWING_RECTANGLE
                            ]
                        },

                    });

                    //添加鼠标绘制工具监听事件，用于获取绘制结果
                    that.drawingManager.addEventListener('overlaycomplete', that.overlaycomplete);
                }, 10);

            }

        },


        created() {
        },


        mounted() {

            //加载线路
            getLines({}).then(res => {
                this.options = res.data
            })

            if (this.$route.query.area != null) {

                //拼音
                this.abbr = this.$route.query.area.abbr
                this.pinyin = this.$route.query.area.pinyin

                //根据 regionId 获取 lineIds
                let regionId = this.$route.query.area.id;
                this.regionId = regionId
                getLineIds({regionId: this.regionId}).then(res => {
                    this.value1 = res.data
                })

                this.area = this.$route.query.area
                this.areaGroups = this.area.group
                this.pts = this.area.pts


                //用来判断用户取消操作
                this.cancelPts = this.area.pts

                if (this.area.hidden == false) {
                    this.hidden = 0
                } else {
                    this.hidden = 1
                }

                if (this.area.disabled == false) {
                    this.disabled = 0
                } else {
                    this.disabled = 1
                }
            }

            //未开始绘制区域
            if (this.pts != null && this.pts.length == 0) {
                this.url = ""
            }

            //已经绘制区域
            if (this.pts != null && this.pts.length > 0) {
                this.area.pts = this.pts

                //圆形
                //  if (this.area.pts != undefined && this.area.shape == 3)
                if (this.area.shape == 3) {
                    this.cancelShape = 3
                    //经度
                    this.longitude = (this.area.pts[1])
                    //维度
                    this.latitude = (this.area.pts[0])

                    let maxLng = this.area.pts[3];
                    let minLng = this.area.pts[3];
                    for (let i = 3; i < this.area.pts.length; i += 2) {
                        let cut = this.area.pts[i];
                        cut > maxLng ? maxLng = cut : null;
                        cut < minLng ? minLng = cut : null;
                    }

                    let maxLat = this.area.pts[2];
                    let minLat = this.area.pts[2];
                    for (let i = 2; i < this.area.pts.length; i += 2) {
                        let cur = this.area.pts[i];
                        cur > maxLat ? maxLat = cur : null;
                        cur < minLat ? minLat = cur : null;
                    }

                    this.zoom = this.getZoom(maxLng, minLng, maxLat, minLat);

                    let pathPolygon = ''
                    for (let i = 2; i < this.area.pts.length; i += 2) {
                        pathPolygon = pathPolygon + parseFloat(this.area.pts[i + 1]) + ',' + parseFloat(this.area.pts[i]) + ';'
                    }

                    this.url = `http://api.map.baidu.com/staticimage/v2?ak=0MA953dkYQM4fQriWe6NaII8QpjeCCZh&center=${this.longitude},${this.latitude}&width=1000&height=320&zoom=${this.zoom + 1}&paths=${pathPolygon}&pathStyles=0xff0000,5,0.9,0xffffff&bbox=500,500;500,500 `

                }

                //多变形
                if (this.area.shape == 1) {
                    this.cancelShape = 1
                    let maxLng = this.area.pts[1];
                    let minLng = this.area.pts[1];
                    for (let i = 1; i < this.area.pts.length; i += 2) {
                        let cut = this.area.pts[i];
                        cut > maxLng ? maxLng = cut : null;
                        cut < minLng ? minLng = cut : null;
                    }

                    let maxLat = this.area.pts[0];
                    let minLat = this.area.pts[0];
                    for (let i = 0; i < this.area.pts.length; i += 2) {
                        let cur = this.area.pts[i];
                        cur > maxLat ? maxLat = cur : null;
                        cur < minLat ? minLat = cur : null;
                    }

                    this.zoom = this.getZoom(maxLng, minLng, maxLat, minLat);

                    let x = 0.0;
                    let y = 0.0;
                    let pathPolygon = ''
                    for (let i = 0; i < this.area.pts.length; i += 2) {
                        x = x + parseFloat(this.area.pts[i + 1]);
                        y = y + parseFloat(this.area.pts[i]);
                        pathPolygon = pathPolygon + parseFloat(this.area.pts[i + 1]) + ',' + parseFloat(this.area.pts[i]) + ';'
                    }
                    this.longitude = (x / this.area.pts.length) * 2;
                    this.latitude = (y / this.area.pts.length) * 2;

                    this.url = `http://api.map.baidu.com/staticimage/v2?ak=0MA953dkYQM4fQriWe6NaII8QpjeCCZh&center=${this.longitude},${this.latitude}&width=1000&height=320&zoom=${this.zoom}&paths=${pathPolygon}&pathStyles=0xff0000,5,0.9,0xffffff&bbox=500,500;500,500 `
                }
                // else if (this.area.pts != undefined && this.area.shape == 1) {
                //
                //     let maxLng = this.area.pts[1];
                //     let minLng = this.area.pts[1];
                //     for (let i = 1; i < this.area.pts.length; i += 2) {
                //         let cut = this.area.pts[i];
                //         cut > maxLng ? maxLng = cut : null;
                //         cut < minLng ? minLng = cut : null;
                //     }
                //
                //     let maxLat = this.area.pts[0];
                //     let minLat = this.area.pts[0];
                //     for (let i = 0; i < this.area.pts.length; i += 2) {
                //         let cur = this.area.pts[i];
                //         cur > maxLat ? maxLat = cur : null;
                //         cur < minLat ? minLat = cur : null;
                //     }
                //
                //     this.zoom = this.getZoom(maxLng, minLng, maxLat, minLat);
                //
                //     let x = 0.0;
                //     let y = 0.0;
                //     let pathPolygon = ''
                //     for (let i = 0; i < this.area.pts.length; i += 2) {
                //         x = x + parseFloat(this.area.pts[i + 1]);
                //         y = y + parseFloat(this.area.pts[i]);
                //         pathPolygon = pathPolygon + parseFloat(this.area.pts[i + 1]) + ',' + parseFloat(this.area.pts[i]) + ';'
                //     }
                //     this.longitude = (x / this.area.pts.length) * 2;
                //     this.latitude = (y / this.area.pts.length) * 2;
                //
                //     this.url = `http://api.map.baidu.com/staticimage/v2?ak=0MA953dkYQM4fQriWe6NaII8QpjeCCZh&center=${this.longitude},${this.latitude}&width=1000&height=320&zoom=${this.zoom}&paths=${pathPolygon}&pathStyles=0xff0000,5,0.9,0xffffff&bbox=500,500;500,500 `
                // }

            }

            /*获取分组信息*/
            this.getAreaGroupsInfo()

        },

    }
</script>

<style scoped>

    .size-full {
        width: 100%;
    }

    #dbmap {
        margin: 0 auto;
        width: 100%;
        height: 500px;
    }

    .dialog__body {
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }

</style>
